<template>
  <div class="app">
    <h1>订酒店</h1>
    <div class="test">
      <djd-input />

      <el-date-picker
        style="margin: 0 10px"
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <input-nav-vue
        :isPos="true"
        :InputVal="val"
        placeholder="人数"
        style="width: 200px"
        @GetFocus="getFocus"
        @EndFocus="endFocus"
      >
        <div
          v-show="is"
          class="tttt"
          @mouseover="isFocus = true"
          @mouseout="isFocus = false"
        >
          <ElForm :model="value" label-width="80px" label-position="left">
            <ElFormItem label="每间">
              <el-autocomplete
                style="width: 150px"
                class="inline-input"
                v-model="value.v1"
                :fetch-suggestions="querySearch"
                placeholder="成人数量"
                @select="handleSelect"
                suffix-icon="el-icon-caret-bottom"
              ></el-autocomplete>

              <el-autocomplete
                style="width: 150px; margin-left: 20px"
                class="inline-input"
                v-model="value.v2"
                :fetch-suggestions="querySearch"
                placeholder="儿童数量"
                @select="handleSelect"
                suffix-icon="el-icon-caret-bottom"
              ></el-autocomplete>
            </ElFormItem>
            <ElFormItem label="儿童年龄">
              <el-autocomplete
                style="width: 150px"
                class="inline-input"
                v-model="value.v3"
                :fetch-suggestions="querySearch"
                placeholder="儿童年龄"
                suffix-icon="el-icon-caret-bottom"
                @select="handleSelect"
              ></el-autocomplete>
            </ElFormItem>
            <el-form-item>
              <hr />
              <el-button
                style="float: right; margin-top: 10px"
                type="warning"
                size="mini"
                @click="onSubmit"
                >确定</el-button
              >
            </el-form-item>
          </ElForm>
        </div>
      </input-nav-vue>
      <i></i>
    </div>

    <djd-wz></djd-wz>

    <el-col id="crend-title">
      <h1>主题住宿</h1>
    </el-col>
    <el-col :span="24">
      <el-tabs stretch>
        <el-tab-pane
          v-for="(item1, index1) in ztzsList"
          :key="index1"
          :label="item1.navbarTitle"
          :name="index1 + ''"
        >
          <djd-ztzs :zs="item1.imgList"></djd-ztzs>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-col id="crend-title">
      <h1>特价酒店</h1>
    </el-col>
    <el-col :span="24">
      <el-tabs stretch>
        <el-tab-pane
          v-for="(item2, index2) in tjjdList"
          :key="index2"
          :label="item2.navbarTitle"
          :name="index2 + ''"
        >
          <djd-tjjd :tj="item2.imgList"></djd-tjjd>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </div>
</template>
<script>
import djdTjjd from "../../components/djd/djd_tjjd.vue";
import djdZtzs from "components/djd/djd_ztzs.vue";
import djdWz from "../../components/djd/djd_wz.vue";
import api from "@/api/djd";
import djdInput from "../../components/djd/djd_ss.vue";
import InputNavVue from "components/comm/InputNav.vue";

export default {
  data() {
    return {
      ztzsList: [],
      tjjdList: [],
      isBlock: false,
      is: false,
      isFocus: false,
      val: "",
      value1: "",
      restaurants: [
        { value: "1" },
        { value: "2" },
        { value: "3" },
        { value: "4" },
      ],
      value: {
        v1: "",
        v2: "",
      },
    };
  },
  components: {
    djdWz,
    djdZtzs,
    djdTjjd,
    djdInput,
    InputNavVue,
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    onSubmit() {
      this.val = `${this.value.v1}成人  ${this.value.v2}儿童`;
      this.is = false;
    },
    isActionBlack() {
      this.isBlock = true;
    },
    isActionNone() {
      this.isBlock = false;
    },
    getFocus() {
      this.is = true;
      console.log("test-获得焦点");
    },
    endFocus() {
      this.isFocus ? "" : (this.is = false);
      console.log("test-失去焦点");
    },
    LiClick(item) {
      this.is = false;
      this.val = item;
      console.log("test-你点击的是:", item);
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  created() {
    api.getZtzsInfo().then((res) => {
      //console.log(res);
      this.ztzsList = res.zsList;
    });
    api.getTjjdInfo().then((res) => {
      //console.log(res);
      this.tjjdList = res.jdList;
    });
  },
};
</script>
<style lang="scss" scoped>
.app {
  // padding: 0 110px;
  box-sizing: border-box;
  flex-shrink: 0;
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0;
  h1 {
    font-size: 24px;
    font-weight: normal;
  }
}

.test {
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
  & > i {
    width: 24px;
    height: 24px;
    padding: 10px;
    background-color: #ffa800;
    border-radius: 4px;
    background-image: url("http://css.mafengwo.net/images/hotel/hotel_index/header-sprites3.png?a=1");
    background-size: auto;
    background-position: 11px -153px;
    margin-left: 10px;
    cursor: pointer;
  }
  .el-range-editor.el-input__inner {
    height: 47px;
    border-color: #999;
  }
  /deep/ .el-date-editor .el-range-separator {
    line-height: 38px;
  }
}
.tttt {
  width: 500px;
  padding: 25px 10px 0 10px;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  background: #fff;
}

#crend-title {
  text-align: center;
  padding: 18px 10px;
}

/deep/ .el-tabs__active-bar {
  background-color: #ff9d00;
}

/deep/ .el-tabs__item.is-active,
/deep/ .el-tabs__item:hover {
  color: #ff9d00;
}

.grid-content {
  padding: 10px;
}
hr {
  border: none;
  border: 0.5px solid #666;
}
/deep/ .el-backtop {
  color: #ff9d00;
}
/deep/ .el-backtop:hover {
  background-color: #fff9ef;
}
</style>
